import React, {useState, useEffect, useRef} from 'react';
import {Button, Modal, Switch, Table,} from "antd";
import {DeleteOutlined, ExclamationCircleOutlined, EditOutlined} from "@ant-design/icons";
import axios from "axios";
import UserForm from "../../../components/user-manage/UserForm";

const {confirm} = Modal;

export default function UserList() {
    const [dataSource, setDataSource] = useState([]);
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [isUpdataVisible, setIsUpdataVisible] = useState(false);
    const [isUpdataDisabled, setIsUpdataDisabled] = useState(false);
    const [regionList, setRegionList] = useState([]);
    const [roleList, setRoleList] = useState([]);
    const [currentId, setCurrentId] = useState([]);

    // 创建添加表单的 ref ，将来透传得到子组件 UserForm
    const addForm = useRef(null);
    const UpdataForm = useRef(null);

    const {roleId,region,username} = JSON.parse(localStorage.getItem('token'))


    useEffect(() => {
        axios.get('/users?_expand=role').then(res => {
            // console.log(res.data)
            // setDataSource(res.data)
            if (roleId === 2){
                const newdata = [
                    ...res.data.filter(item => item.username === username),
                    // 同区域的下属
                    ...res.data.filter(item => item.region === region && item.roleId === 3)
                ]
                // console.log(newdata)
                setDataSource(newdata)
            }else {
                setDataSource(res.data)
            }
        })
        // 取表单中区域数据
        axios.get('/regions').then(res => {
            // console.log(res.data)
            setRegionList(res.data)
        })
        // 取表单中角色数据
        axios.get('/roles').then(res => {
            // console.log(res.data)
            setRoleList(res.data)
        })
    }, [region,roleId,username])

    // 删除确认提示框
    const confirmDel = (item) => {
        confirm({
            title: '你确定要删除?',
            icon: <ExclamationCircleOutlined/>,
            okText: '确认',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
                deleteMethod(item)
            },
            onCancel() {
                console.log('取消');
            },
        });
    }

    // 确认删除后执行的函数
    const deleteMethod = (item) => {
        // console.log('deleteMethod',item);
        setDataSource(dataSource.filter(data => data.id !== item.id))
        axios.delete(`/users/${item.id}`)
    }

    // 弹出添加用户对话框
    const showModal = () => {
        setIsModalVisible(true);
    };
    // 点击添加，提交表单
    const onOk = () => {
        // console.log("add",addForm)
        addForm.current.validateFields().then(value => {
            // console.log(value)

            // 拿到正确的表单数据后，关闭对话框，清空表单
            setIsModalVisible(false)
            addForm.current.resetFields()

            // 提交表单，post到后端，自动生成id，再设置 dataSource，方便后面的删除和更新
            axios.post('/users', {
                ...value,
                // 需要添加上 roleState ，default 两个属性
                "roleState": true,
                "default": false,
            }).then(res => {
                // console.log(res.data)
                // console.log(roleList.filter(item => item.id === value.roleId))
                setDataSource([...dataSource, {
                    // 需要添加上 role
                    ...res.data,
                    role: roleList.filter(item => item.id === value.roleId)[0]
                }])
            })
        }).catch(err => {
            console.log(err)
        })
    }

    // 更新用户权限与信息
    const UserUpdata = (item) => {
        // console.log(item)
        // 异步变同步
        setTimeout(() => {
            // 弹出更新用户信息对话框
            setIsUpdataVisible(true);
            // 如果用户为超级管理
            if (item.roleId === 1) {
                // 禁用区域框
                // console.log(item.roleId)
                setIsUpdataDisabled(true)
            } else {
                // 取消禁用
                // console.log(item.roleId)
                setIsUpdataDisabled(false)
            }
            UpdataForm.current.setFieldsValue(item)
        }, 0)

        // 保存被点击项的id
        setCurrentId(item.id)
    }
    // 点击更新，提交表单
    const onUpdataOk = () => {
        UpdataForm.current.validateFields().then(value => {
            // console.log(value)
            setIsUpdataVisible(false);

            setDataSource(dataSource.map(item => {
                if (item.id === currentId) {
                    return {
                        ...item,
                        ...value,
                        role: roleList.filter(item => item.id === value.roleId)[0]
                    }
                }
                return item
            }))

            // 为了下次点其他用户时不受这个用户改变导致 isUpdataDisabled 与 子组件 isDisabled 不同的影响
            setIsUpdataDisabled(!isUpdataDisabled)

            axios.patch(`/users/${currentId}`, value)
        })
    }

    const columns = [
        {
            title: '区域',
            dataIndex: 'region',
            render: (region) => {
                return <b>{region ? region : '全球'}</b>
            },
            // 筛选
            filters: [
                {
                    text: '全球',
                    value: ''
                },
                ...regionList.map(item => ({
                    text: item.title,
                    value: item.value
                }))
            ],
            filterMode: 'tree',
            // value: 点击 ok 后传进来的 value，record：dataSource
            onFilter: (value, record) => record.region === value,
            width: '20%',
        },
        {
            title: '角色名称',
            dataIndex: 'role',
            render: (role) => {
                return role?.roleName
            }
        },
        {
            title: '用户名',
            dataIndex: 'username',
        },
        {
            title: '用户状态',
            dataIndex: 'roleState',
            render: (roleState, item) => {
                return <Switch checked={roleState} disabled={item.default} onChange={() => {
                    item.roleState = !item.roleState
                    // console.log(item)
                    setDataSource([...dataSource])
                    axios.patch(`/users/${item.id}`, {
                        roleState: item.roleState
                    })
                }}/>
            }
        },
        {
            title: '操作',
            render: (item) => {
                return <div className='noselect'>
                    <Button type="primary" shape="circle" icon={<EditOutlined/>} disabled={item.default}
                            onClick={() => UserUpdata(item)}/>
                    &nbsp;&nbsp;
                    <Button danger shape="circle" icon={<DeleteOutlined/>} onClick={() => confirmDel(item)}
                            disabled={item.default}/>
                </div>
            }
        },
    ]

    return <div>
        <Button type={"primary"} onClick={() => showModal()}>添加用户</Button>
        <Table dataSource={dataSource} columns={columns} pagination={{pageSize: 6}}
               rowKey={item => item.id}/> {/* 因为 Tabel 中使用了 pagination 组件，所以需要这样设置一页条数 */} {/* 因为返回的数据中没有 key 属性，所以需要自己设置一个 rowKey */}

        <Modal
            visible={isModalVisible}
            title="添加用户信息"
            okText="添加"
            okType="primary"
            cancelText="取消"
            onCancel={() => {
                setIsModalVisible(false);
            }
            }
            onOk={onOk}
        >
            <UserForm regionList={regionList} roleList={roleList} ref={addForm}/>
        </Modal>

        <Modal
            visible={isUpdataVisible}
            title="更新用户信息"
            okText="更新"
            okType="primary"
            cancelText="取消"
            onCancel={() => {
                setIsUpdataVisible(false);

                // 按了取消后，有可能父组件 isUpdataDisabled 与子组件的 isDisable 状态值不一样。为了保证下一次开始前都会根据父组件 isUpdataDisabled 状态刷新一次子组件的 isDisable
                setIsUpdataDisabled(!isUpdataDisabled)
            }}
            onOk={onUpdataOk}
        >
            <UserForm regionList={regionList} roleList={roleList} isUpdataDisabled={isUpdataDisabled} ref={UpdataForm}/>
        </Modal>
    </div>;
}